{% extends 'base_templates/base.html' %}

{% block title %}家电之选-商品列表{% endblock %}

{% block breadcrumb %}
    <div class="container">
        <nav class="breadcrumb is-marginless mt-3 mb-3 is-small" aria-label="breadcrumbs">
            <ul>
                <li><a href="{% url 'goods:index' %}">首页</a></li>
                <li class="is-active"><a href="{% url 'goods:list' 'all' 1 %}" aria-current="page">全部商品</a></li>
            </ul>
        </nav>
    </div>
{% endblock breadcrumb %}

{% block container %}
    <div class="box is-marginless is-radiusless">
        <a href="{% url 'goods:list' 'all' 1 %}"
           class="mr-2 {% if show_type == 'all' %} has-text-danger-dark {% else %} has-text-black {% endif %}">全部分类</a>
        {% for goods_type in goods_types %}
            {% if goods_type.is_active %}
                <a class="mr-2 has-text-danger-dark"
                   href="{% url 'goods:list' goods_type.logo 1 %}">{{ goods_type.name }}</a>
            {% else %}
                <a class="mr-2 has-text-black" href="{% url 'goods:list' goods_type.logo 1 %}">{{ goods_type.name }}</a>
            {% endif %}
        {% endfor %}
    </div>
    <div class="box is-radiusless">
        <div class="mt-2">
            <span class=" has-text-grey-light">排序：</span>
            {% if request.GET.price == '-price' %}
                <a class="mr-2 has-text-black {% if request.GET.price %} has-text-danger-dark {% endif %}"
                   href="?price=price">价格
                    {% if request.GET.price %}<span class="mdi mdi-arrow-down"></span>{% endif %}
                </a>
            {% else %}
                <a class="mr-2 has-text-black {% if request.GET.price %} has-text-danger-dark {% endif %}"
                   href="?price=-price">价格
                    {% if request.GET.price %}<span class="mdi mdi-arrow-up"></span>{% endif %}
                </a>
            {% endif %}

            {% if request.GET.sales == '-sales' %}
                <a class="mr-2 has-text-black {% if request.GET.sales %} has-text-danger-dark {% endif %}"
                   href="?sales=sales">销量
                    {% if request.GET.sales %}<span class="mdi mdi-arrow-down"></span>{% endif %}
                </a>
            {% else %}
                <a class="mr-2 has-text-black {% if request.GET.sales %} has-text-danger-dark {% endif %}"
                   href="?sales=-sales">销量
                    {% if request.GET.sales %}<span class="mdi mdi-arrow-up"></span>{% endif %}
                </a>
            {% endif %}

            {% if request.GET.date == '-date' %}
                <a class="mr-2 has-text-black {% if request.GET.date %} has-text-danger-dark {% endif %}"
                   href="?date=date">上架时间
                    {% if request.GET.date %}<span class="mdi mdi-arrow-down"></span>{% endif %}
                </a>
            {% else %}
                <a class="mr-2 has-text-black {% if request.GET.date %} has-text-danger-dark {% endif %}"
                   href="?date=-date">上架时间
                    {% if request.GET.date %}<span class="mdi mdi-arrow-up"></span>{% endif %}
                </a>
            {% endif %}
        </div>
    </div>

    <div class="box1 is-radiusless is-shadowless">
        {% if pages.object_list %}
            <div class="columns is-multiline">
                {% for goods in pages.object_list %}
                    <div class="column is-3">
                        <div class="has-background-white is-flex is-flex-direction-column" style="min-height: 430px;">
                            <figure class="image is-1by1">
                                <a href="{% url 'goods:detail' goods.goods_sku.id %}"><img src="{{ goods.image }}"
                                                                                           alt="{{ goods.goods_sku.name }}"></a>
                            </figure>
                            <div class="is-flex-grow-1 is-flex is-flex-direction-column is-justify-content-center">
                                <p class="has-text-justified spu-title pl-3 pr-3">
                                    <a href="{% url 'goods:detail' goods.goods_sku.id %}"
                                       class="has-text-black-ter">{{ goods.goods_sku.name }}</a>
                                </p>
                            </div>
                            <div class="pl-2 pr-2 pb-2">
                                <div class="is-flex is-align-items-center is-justify-content-space-between">
                                    <span class="is-size-5 has-text-danger-dark">¥{{ goods.price }}</span>
                                </div>
                                <div class="is-flex is-align-items-center is-justify-content-space-between">
                                    <span class="is-size-7 has-text-grey-light">{{ goods.sales }}人付款</span>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="has-text-centered has-text-danger is-size-5">
                <img src="{% url 'media' 'img/noGoods.png' %}">
                <p> 本店暂无该商品哦~ </p>
                <a class=" button is-primary is-outlined mt-4" href="{% url 'goods:index' %}">继 续 逛</a>
            </div>
        {% endif %}
    </div>
    <div class="mt-3">
        <nav class="pagination is-small" role="navigation" aria-label="pagination">
            <ul class="pagination-list">
                {% if pages.has_previous %}
                    <li><a class="pagination-link"
                           href="{% url 'goods:list' show_type pages.previous_page_number %}{{ sorted }}">上一页</a>
                    </li>
                {% endif %}
                {% for page in pages.my_page_range %}
                    {% if page == pages.number %}
                        <li><a class="pagination-link is-current"
                               href="{% url 'goods:list' show_type page %}{{ sorted }}">{{ page }}</a></li>
                    {% else %}
                        <li><a class="pagination-link"
                               href="{% url 'goods:list' show_type page %}{{ sorted }}">{{ page }}</a></li>
                    {% endif %}
                {% endfor %}
                {% if pages.has_next %}
                    <li><a class="pagination-link"
                           href="{% url 'goods:list' show_type pages.next_page_number %}{{ sorted }}">下一页</a></li>
                {% endif %}
            </ul>
        </nav>
    </div>
{% endblock container %}